<?php $this->_extends('_layouts/basic_layout'); ?>

<?php $this->_block('adminPageCss'); ?>
	<link rel="stylesheet" href="<?php echo $plugin_url; ?>ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<link href='<?php echo $plugin_url; ?>jquery-uploadify/css/uploadify.css' rel='stylesheet' type='text/css' />
<?php $this->_endblock(); ?>

<?php $this->_block('adminPageJs'); ?>
	<script src="<?php echo $js_url; ?>libs/jquery.easing.js"></script>
	<script src="<?php echo $js_url; ?>libs/jquery.masonry.js"></script>
	<script src="<?php echo $plugin_url; ?>ztree/js/jquery.ztree.core-3.4.min.js"></script>
	<script src="<?php echo $plugin_url; ?>ztree/js/jquery.ztree.exedit-3.4.min.js"></script>
	<script src="<?php echo $plugin_url; ?>jquery-uploadify/js/jquery.uploadify-3.1.min.js" type="text/javascript"></script>
<?php $this->_endblock(); ?>

<?php $this->_block('title'); ?>
	Type - Picture Material
<?php $this->_endblock(); ?>

<?php $this->_block('admin_contents'); ?>


<div class="row-fluid">		<!-- sortable ui-sortable --> 
	<div class="box span12 noMargin">
		<div class="box-header well">
			<h2><i class="icon-user"></i> 从本地上传图片</h2>
		</div>
		<div class="box-content">
			<div class="span12">
				<div class="span2 Hspace9" style="overflow: auto;">
					<?php $this->_element('albumstree'); ?>
				</div>
				
				<div class="span10 Hspace9">		<!-- posRel -->
					<div class="row-fluid">
						<div class="span9">
							<div class="alert alert-block noPadding noMargin">
								预览缩放<span id="photo-size-text"></span>%
								<div id="photo-size-set"></div>
								<div class="alert alert-info noPadding noMargin">
									<div class="row-fluid">
										<div class="span3">
											当前Album: <span id="currAlbumTxt"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										</div>
										<div class="span5">
											<a class="btn btn-inverse" id="addNewAlbumBtn" href="javascript:void(0);">新建子相册</a>
											<a class="btn btn-inverse" id="editCurrAlbumBtn" href="javascript:void(0);">编辑本相册</a>
										</div>
										<div class="span4">
											<label for="confirm_delete_pic">
												<input type="checkbox" id="confirm_delete_pic" checked="checked" />
												删除图片时询问
											</label>
										</div>
									</div>
								</div>
								<script>
									$(function(){
										$("#photo-size-set").slider({ 
											min: 1,
											max: 100,
											step: 1,
											value: 30,
											create: function(){$('#photo-size-text').text('30');},
											slide: function(event, ui){
												$('#photo-container img').picPortionResize({
													staticSide: 'width',
													setting: {
														staticVal: 180 / 0.3 * ui.value / 100,
														anotherMax: 0
													},
													keepSmaller: false	
												});
												waterFall($('#photo-container'));
												$('#photo-size-text').text(ui.value);
											}
										});
									});
								</script>
							
								<div id="album-photos" class="Hspace7 whiteBg auto-zindex" style="overflow: auto; position: relative;">
									<span id="empty-photo-text">相册还是空的</span>
									<div class="loading-block" id="loading-block-photo">
										<img class="Hspace7 full" src="<?php echo $img_url; ?>loading.gif" />
									</div>
									<script>
										$('#empty-photo-text').hide();
										$('#loading-block-photo').hide();
									</script>
									
									<div id="photo-container"></div>
								</div>
							</div>
						</div>
						
						<div class="span3">
							<div class="alert alert-block noPadding noMargin">
								相片质量:<span id="quality-text" class="fleft"></span>%
								<div id="quality-set" class="quality-set"></div>
								(高质量的图片更加清晰，但也占用更高的存储空间)<br />
								<script>
									$( "#quality-set" ).slider({ 
										min: 30,
										max: 99,
										step: 1,
										value: 75,
										create: function(){$('#quality-text').text('75');},
										slide: function(event, ui){$('#quality-text').text(ui.value);}
									});
								</script>
								<a class="btn btn-inverse" href="javascript:$('#file_upload').uploadify('upload', '*')">开始上传</a>
								<a class="btn btn-inverse" href="javascript:$('#file_upload').uploadify('cancel', '*')">取消全部</a>
								<input type="file" name="file_upload" id="file_upload" data-no-uniform="true" />
							</div>
							
							<script>
								$(function() {
								    $("#file_upload").uploadify({
								    	'method'   : 'post',
								        'swf'      : '<?php echo $plugin_url; ?>jquery-uploadify/swf/uploadify.swf',
								        'uploader' : '<?php echo url('picmaterials/processuploadify'); ?>',
										'auto': false,
										'buttonText': '添加图片',
										//'fileTypeDesc' : 'Image Files',
								        //'fileTypeExts' : '*.gif; *.jpg; *.jpeg; *.png; *.bmp', 
										'onInit'   : function(instance) {
	
								        },
										'onSWFReady' : function() {
								        	uploadifyNewImg = '';
								        },
								        'onUploadStart' : function(file) {
								            $("#file_upload").uploadify("settings", "formData", {'albumId': $('#zTreeCurrId').val(), 'sessid': '<?php echo $sessid; ?>', 'quality': $( "#quality-set" ).slider('value')});
								        },
								        'onQueueComplete' : function(queueData) {
									        setTimeout(function(){
									        	$('#photo-container img').fadeIn();
												waterFall($('#photo-container'));	
										    }, 500);  // wait for onUploadSuccess of last image
									        $('#photo-container img').fadeIn();
											waterFall($('#photo-container'));	
								        },
								        'onUploadSuccess' : function(file, data, response) {
								            data = JSON.parse(data);
								            if(data.result){
												var newImg = new Image();
												$(newImg).addClass('photoimg').hide();
												$(newImg).load(function(){
													var a = $('<a class="thumbnail noMargin son-noMargin marginR1-2 marginB1-2" />');
													a.append(
														'<i class="icon-remove pointerCursor posAbs top-1 right-1"></i><input class="renameInput" type="text" value="'+data.name+'" />'
													).append($(this));

													$(this).picPortionResize({
														staticSide: 'width',
														setting: {
															staticVal: 180 / 0.3 * $( "#photo-size-set" ).slider('value') / 100,
															anotherMax: 0
														},
														keepSmaller: false	
													});
													
													$('#photo-container').prepend(a);
													$(this).fadeIn();
													waterFall($('#photo-container'));	
													a.data(
														'picId', data.id
													).attr({
														'data-rel': 'popover',
														'data-content': 
															'原始文件大小: ' + data.size / 1000 + 'Kb<br />' + 
															'保存质量: ' + data.quality + '<br />' + 
															'当前显示: 缩略图<br />' + 
															'上传类型: ' + data.type 
													}).popover();
												});
												$(newImg).attr('src', <?php echo json_encode($picmaterial_url); ?> + data.thumbnailFileSrc);
												$('#empty-photo-text').hide();
								            }else{
												noty({
													'text': data.error,
													'layout': 'topRight',
													'type': 'error'
												});
												 $("#file_upload").uploadify('stop');
								            }
								        }
								    });
	
								    $('#album-photos .icon-remove').live('click', function(){
										var toDelete = true;
									    if($('#confirm_delete_pic').attr("checked")){
									    	toDelete = confirm('确认删除?');
									    }
									    if(toDelete){
										    var thisObj = $(this);
											var picId = $(this).parent().data('picId');
											$.ajax({
												type: 'POST',
												url: '<?php echo url('picmaterials/deleteone'); ?>',
												data: {picId: picId},
												success: function(ret) {
													if(ret){
														$('.popover').remove();
														thisObj.parent().remove();
														waterFall($('#photo-container'));
													}
												}
											});
									    }
									});

								    $('#album-photos .renameInput').live('blur', function(){
								    	var thisObj = $(this);
										var picId = $(this).parent().data('picId');
										var newName = $(this).val();
										if(newName != $(this).data('focusVal')){
											$.ajax({
												type: 'POST',
												url: '<?php echo url('picmaterials/renameOne'); ?>',
												data: {picId: picId, newName: newName},
												success: function(ret) {
													if(ret){

													}else{
														thisObj.val(thisObj.data('focusVal'))
													}
												}
											});
										}
									}).live('focus', function(){
										$(this).data('focusVal', $(this).val());
									});
								});
							</script>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<?php $this->_endblock(); ?>